<template>
  <div class="order-detail">
    <overlay v-if="showMaskLayer"></overlay>
    <div class="detail" v-else-if="$route.name === 'detail' && !showMaskLayer">
      <detail-header :users="userInfo" />
      <detail-content :orders="orderInfo" />
      <detail-footer
        :order="orderInfo"
        v-if="tag"
      ></detail-footer>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import detailHeader from './components/detail-header.vue';
import detailContent from './components/detail-content.vue';
import detailFooter from './components/detail-footer.vue';
import overlay from 'components/content/overlay/overlay.vue';
import { mapState, mapMutations } from 'vuex';

export default {
    name: 'detail',
    data () {
        return {
            orderInfo: {},
            tag: false,
            userInfo: {} // 包含头像，性别，发布时间，昵称，发布时间
        };
    },
    components: {
        detailHeader,
        detailContent,
        detailFooter,
        overlay
    },
    created () {
        this.resetStatus({ state: 'showMaskLayer', status: true });
        const promise = new Promise((resolve, reject) => {
            this.$api.orderApi
                .detail(this.$route.params.id)
                .then(res => {
                    this.orderInfo = Object.assign({}, this.orderInfo, res.data);
                    res.code === 2009
                        ? resolve({
                            userid: res.data.orderByCreateID,
                            createTime: this.orderInfo.orderCreateTime
                        })
                        : reject(res.data);
                })
                .catch(err => {
                    throw err;
                });
        });

        promise
            .then(result => {
                this.$api.userApi.getUserInfo({ id: result.userid }).then(res => {
                    if (res.code === 2010) {
                        this.userInfo = Object.assign(
                            {},
                            { createTime: result.createTime },
                            this.data,
                            res.data
                        );
                        this.tag = true;
                    }
                });
            })
            .catch(err => {
                throw Error(err);
            })
            .then(() => {
                this.resetStatus({ state: 'showMaskLayer', status: false });
            });
    },
    methods: {
        ...mapMutations(['resetStatus'])
    },
    computed: {
        ...mapState(['showMaskLayer'])
    }
};
</script>

<style scoped lang="less">
  .order-detail {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>
